import React, {Component} from 'react'
import {StyleSheet, TouchableOpacity, Text, View, Platform} from 'react-native'
import {MaterialIcons, Ionicons, FontAwesome} from '@expo/vector-icons'
import TextSwiper from './TextSwiper'
import {connect} from 'react-redux'

const styles = StyleSheet.create({
    main: {
        flex: 1,
        backgroundColor: 'rgba(255,255,255,1)',
        paddingTop: 10,
        flexDirection: 'row'
    },
    container: {
        flex: 1,
        marginLeft: 14,
        marginRight: 14,
        paddingBottom: 10,
        paddingTop: 12,
        borderTopWidth: 1,
        borderTopColor: '#ebebeb',
        flexDirection: 'row',
        alighItems: 'center',
        justifyContent: 'space-between'
    },
    moreInfoBtn: {
        borderLeftWidth: 1,
        borderLeftColor: '#ebebeb',
        justifyContent: 'center',
        alighItems: 'center',
        paddingLeft: 15
    },
    textSwiper: {
        flex: 1,
        height: 20,
        flexDirection: 'row',
        justifyContent: 'center',
        alighItems: 'center'
    },
    textSwiperView: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alighItems: 'center'
    }
})

class Announcement extends Component {
    pressHandle() {
        console.log('more announcement')
    }
    render() {
        const {announcementList} = this.props
        return <View style={styles.main}>
            <View style={styles.container}>
                {Platform.OS === 'ios'
                    ? <Ionicons name='ios-megaphone' size={20}/>
                    : <FontAwesome size={20} name='bullhorn'/>
}
                <View style={{
                    height: 20
                }}>
                    <TextSwiper style={styles.textSwiper}/>
                </View>
                {announcementList === null || announcementList.length === 0
                    ? null
                    : <TouchableOpacity onPress={this.pressHandle} style={styles.moreInfoBtn}>
                        <Text >更多公告</Text>
                    </TouchableOpacity>
}
            </View>
        </View>
    }
}

const mapStateToProps = (state) => ({announcementList: state.announcement.list})

export default connect(mapStateToProps)(Announcement)